<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


	<meta content="width=device-width, initial-scale=1.0" name="viewport" />

	<meta content="" name="description" />

	<meta content="" name="author" />

	<!-- BEGIN GLOBAL MANDATORY STYLES -->

	<link href="media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/style-metro.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/style.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/style-responsive.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>

	<link href="media/css/uniform.default.css" rel="stylesheet" type="text/css"/>

	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES --> 

	<link href="media/css/jquery.gritter.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/daterangepicker.css" rel="stylesheet" type="text/css" />

	<link href="media/css/fullcalendar.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/jqvmap.css" rel="stylesheet" type="text/css" media="screen"/>

	<link href="media/css/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>

	<!-- END PAGE LEVEL STYLES -->

	<link rel="shortcut icon" href="media/image/favicon.ico" />
	
	
	
		
<link rel="stylesheet" href="../layui/css/layui.css"  media="all">	
<script type="text/javascript" src="../axios/vue.js"></script>
<script type="text/javascript" src="../axios/axios.min.js"></script>
<script type="text/javascript" src="../axios/qs.js"></script>
<script type="text/javascript" src="../axios/getUrlParams.js"></script>
<script type="text/javascript" src="../layer/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../layer/layer.js"></script>

	
</head>
<body>
<div class="page-content">
			<div class="container-fluid">

				<!-- BEGIN PAGE HEADER-->

				<div class="row-fluid">

					<div class="span12">

						<!-- BEGIN STYLE CUSTOMIZER -->


						<!-- END BEGIN STYLE CUSTOMIZER -->  

						<!-- BEGIN PAGE TITLE & BREADCRUMB-->

						<h3 class="page-title">


						</h3>

						<ul class="breadcrumb">

							<li>

								<i class="icon-home"></i>

								<a href="index.html">首页</a> 

								<i class="icon-angle-right"></i>

							</li>

							<li>
								<a href="#">贴子列表</a>

							</li>


						</ul>

						<!-- END PAGE TITLE & BREADCRUMB-->

					</div>

				</div>

				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->

				<div class="row-fluid" id="app">

					<div class="span12">

						<!-- BEGIN EXAMPLE TABLE PORTLET-->

						<div class="portlet box light-grey" style="border-top:1px solid #eee;">


							<div class="portlet-body">

								<div class="clearfix">

									<div class="btn-group">
									
									 
									<div>
									
									<input type="text" v-model="key" placeholder="贴子名称..."  style="margin-top: 10px;"/>

										<a @click="getarticlelist()" id="sample_editable_1_new" class="btn green" style="margin: 0px 5px;">
										
										搜索 <i class="icon-search"></i>

										</a>


									</div>

									</div>


								</div>

								<table class="table table-striped table-bordered table-hover" id="sample_1">

									<thead>

										<tr>

                                            <th>标题</th>
                                            <th>版块</th>
                                            <th>发布时间</th>
                                            <th>发表人</th>
                                            <th>查看次数</th>
                                            <th>回帖数</th>
                                            <th>是否精华</th>
                                            <th>操作</th>
										</tr>

									</thead>

									<tbody>

										<tr v-for="article in articlelist" class="odd gradeX">


                                            <td>{{article.title}}</td>
                                            <td>{{article.section.name}}</td>
                                            <td>{{article.savetime}}</td>
                                            <td>{{article.member.tname}}</td>
                                            <td>{{article.lookcs}}</td>
                                            <td>{{article.replylist.length}}</td>
                                            <td>{{article.isjh}}</td>
											
											<td style="width: 20%">
                                                <a :href="['replylist.html?articleid='+article.id]"> <span class="layui-badge layui-bg-orange">查看回帖</span> </a>
                                                <a v-if="article.isjh=='no'" href="javascript:;" @click="updateJh(article.id)"><span class="layui-badge">精华</span></a>
                                                <a v-if="article.isjh=='yes'" href="javascript:;" @click="updateJh(article.id)"><span class="layui-badge">取消精华</span></a>
                                                <a href="javascript:;" @click="del(article.id)"><span class="layui-badge">删除</span></a>
											</td>
										</tr>
										<tr>
										  <td colspan="9"><div id="demo1" style="text-align:center"></div></td>
										</tr>







									</tbody>

								</table>

							</div>

						</div>

						<!-- END EXAMPLE TABLE PORTLET-->

					</div>

				</div>

				

				<!-- END PAGE CONTENT-->

			</div>

			<!-- END PAGE CONTAINER-->

		</div>
</body>
<script src="../layui/layui.js" charset="utf-8"></script>
<script>

    var qs = Qs
    var vmm = new Vue({
        el: '#app',
        data: {
            articlelist: [],
            key: '',
            pageSize:10,

        },
        mounted(){
            this.article_list()
        },
        methods: {
            updateJh(id){
                axios.post('updateisjh',qs.stringify({
                    id:id,
                })).then(response =>{
                    this.article_list()
                }).catch(error =>{
                    console.log(error)
                })
            },
            article_list() {
                axios.post('articleList',qs.stringify({
                    key:this.key,
                    pageSize:this.pageSize
                })).then(response =>{
                    layui.use(['laypage', 'layer'], function(){
                        var laypage = layui.laypage
                            ,layer = layui.layer;
                        //总页数大于页码总数
                        laypage.render({
                            elem: 'demo1'
                            ,limit:vmm.pageSize
                            ,count: response.data.list.length //数据总数
                            ,jump: function(obj,first){
                                vmm.current_page(obj.curr,vmm.pageSize)
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            }
                        });
                    });
                }).catch(error =>{
                    console.log(error)
                })
            },
            current_page(page,pageSize){
                axios.post('articleList',qs.stringify({
                    key:this.key,
                    pageNum:page,
                    pageSize:pageSize,
                })).then(response =>{
                    this.articlelist = response.data.pageInfo.list
                }).catch(error =>{
                    console.log(error)
                })
            },

            del(id){
                axios.post("articleDel",qs.stringify({
                    id:id,
                })).then(response =>{
                    window.location.href="articlelist.html"
                }).catch(error =>{
                    console.log(error)
                })
            },


        }
    });
</script>

</html>